<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.params" placeholder="用户名称/公司名称/手机号码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.userType" clearable placeholder="请选择">
						<el-option v-for="item in allOptions"
								   :key="item.value"
								   :label="item.label"
								   :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="document" @click="handleDownload">导出用户 Excel</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="document" @click="handleImport">导入绑定设备 Excel</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column :selectable="isSelect" type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" show-overflow-tooltip width="60">
			</el-table-column>
			<el-table-column prop="userType" show-overflow-tooltip label="类型" width="120" :formatter="formatUserType">
			</el-table-column>
			<el-table-column prop="mobileNo" show-overflow-tooltip label="账号名称" width="130">
			</el-table-column>
			<el-table-column prop="email" show-overflow-tooltip label="邮箱" width="180">
			</el-table-column>
			<el-table-column prop="compName" show-overflow-tooltip label="公司名称" width="120">
			</el-table-column>
			<el-table-column prop="userName" show-overflow-tooltip label="姓名" min-width="180">
			</el-table-column>
			<el-table-column prop="bindDeviceNum" show-overflow-tooltip label="绑定设备数" min-width="120">
			</el-table-column>
			<el-table-column prop="isEnabled" show-overflow-tooltip label="可用" min-width="180" :formatter="formatEnabled">
			</el-table-column>
			<el-table-column prop="creator" show-overflow-tooltip label="创建人" min-width="180">
			</el-table-column>
			<el-table-column prop="createTime" show-overflow-tooltip label="创建时间" min-width="180" :formatter="formatDate">
			</el-table-column>
			<el-table-column prop="modifier" show-overflow-tooltip label="修改人" min-width="180" >
			</el-table-column>
			<el-table-column prop="modifyTime" show-overflow-tooltip label="修改时间" min-width="180" :formatter="formatDate">
			</el-table-column>
			<el-table-column prop="remark" show-overflow-tooltip label="备注" min-width="180">
			</el-table-column>
			<el-table-column fixed="right" show-overflow-tooltip label="操作" width="350">
				<template scope="scope">
					<el-button v-if="scope.row.userType!=1" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button v-if="scope.row.userType==2 || scope.row.userType ==6" size="small" @click="handleRole(scope.$index, scope.row)">角色</el-button>
					<el-button v-if="scope.row.userType ==4|| scope.row.userType ==5" size="small" @click="handleBatchBind(scope.$index, scope.row)">批量绑定</el-button>
					<el-button v-if="scope.row.userType ==4|| scope.row.userType ==5" size="small" @click="handleBatchUnBind(scope.$index, scope.row)">批量解绑</el-button>
					<el-button v-if="scope.row.userType!=1" type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		<!--上传组件-->
		<el-dialog title="上传" :visible.sync="uploadVisible" :close-on-click-modal="false">
			<div align="center"><el-button type="primary" @click="downloadTemp"  align="center">点击下载模板</el-button></div>
			<br>
			<div align="center">
				<el-upload drag :action="uploadUrl" :before-upload="beforeUpload" :on-success="afterSuccess"
						   :headers="headers">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只能上传xls、xlsx文件，且不超过10MB</div>
				</el-upload>
			</div>
		</el-dialog>
		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="姓名" prop="userName">
							<el-input v-model="editForm.userName" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="公司名称" prop="compName">
							<el-input v-model="editForm.compName" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="可用" prop="isEnabled">
							<el-switch v-model="editForm.isEnabled"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="类型" prop="userType">
							<el-select v-model="editForm.userType" clearable placeholder="请选择">
								<el-option v-for="item in editOptions"
										   :key="item.value"
										   :label="item.label"
										   :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="所属开发者" prop="devPl">
							<el-select v-model="editForm.devPl" clearable placeholder="请选择">
								<el-option v-for="item in devUsers"
										   :key="item.id"
										   value-key
										   :label="item.mobileNo"
										   :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="账号名称" prop="mobileNo">
							<el-input v-model="editForm.mobileNo" :disabled="true" auto-complete="off">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="editForm.email" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="新密码" prop="remark">
							<el-input type="password" v-model="editForm.pwd"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="editForm.remark"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="姓名" prop="userName">
							<el-input v-model="addForm.userName" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="公司名称" prop="compName">
							<el-input v-model="addForm.compName" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="可用" prop="isEnabled">
							<el-switch v-model="addForm.isEnabled" ></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="类型" prop="userType">
							<el-select v-model="addForm.userType" clearable placeholder="请选择">
								<el-option v-for="item in addOptions"
										   :key="item.value"
										    value-key
										   :label="item.label"
										   :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="账号名称" prop="mobileNo">
							<el-input v-model="addForm.mobileNo" auto-complete="off">
								<!--<el-button slot="append" @click="sendMsg" :disabled="codeTimeAllow">{{numberCode}}</el-button>-->
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所属开发者" prop="devPl">
							<el-select v-model="addForm.devPl" clearable placeholder="请选择">
								<el-option v-for="item in devUsers"
										   :key="item.id"
										   value-key
										   :label="item.mobileNo"
										   :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="addForm.email" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="addForm.remark"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--角色-->
		<el-dialog center title="角色" :visible.sync="editRoleVisible" :close-on-click-modal="false">
			<div style="text-align: center">
				<el-transfer
						style="text-align: left; display: inline-block"
						v-model="selectRoles"
						:titles="['未选中', '已选中']"
						:button-texts="['移除角色', '添加角色']"
						:props="defaultProps"
						:data="noRoles">
				</el-transfer>
			</div>
			<div style="text-align: center" slot="footer" class="dialog-footer">
				<el-button @click.native="editRoleVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editRoleSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--未绑定设备列表-->
		<el-dialog title="未绑定设备列表"  width="50%" :visible.sync="deviceListVisible" :close-on-click-modal="false">
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input v-model="filters.uid" placeholder="设备uid"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="filters.fromUid" placeholder="开始uid"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="filters.toUid" placeholder="结束uid"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getUnBindDevices">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="batchBindDevice">批量绑定</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-table :data="deviceList" v-loading="listLoading3" @selection-change="selsDeviceChange" tooltip-effect="dark" border height="300" style="width: 100%">
				<el-table-column type="selection" width="55"/>
				<el-table-column prop="devName" label="相机名称" width="150"/>
				<el-table-column prop="guid" label="设备UID" width="150"/>
				<el-table-column prop="bindUserNum" label="绑定数量"/>
				<el-table-column prop="bindUserName" label="最后绑定用户"/>
				<el-table-column prop="bindTime" label="绑定时间" :formatter="formatDate"/>
				<el-table-column prop="bindMobileNo" label="绑定手机"/>
			</el-table>
		</el-dialog>
		<!--已绑定设备列表-->
		<el-dialog title="已绑定设备列表"  width="50%" :visible.sync="deviceListVisible2" :close-on-click-modal="false">
			<el-form>
				<el-form-item>
					<el-button type="primary" v-on:click="batchUnBindDevice">批量解绑</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="deviceList" v-loading="listLoading3" @selection-change="selsDeviceChange"height="300"  tooltip-effect="dark" border style="width: 100%">
				<el-table-column type="selection" width="55"/>
				<el-table-column prop="devName" label="相机名称" width="150"/>
				<el-table-column prop="guid" label="设备UID" width="150"/>
				<el-table-column prop="bindUserNum" label="绑定数量"/>
				<el-table-column prop="bindUserName" label="最后绑定用户"/>
				<el-table-column prop="bindTime" label="绑定时间" :formatter="formatDate"/>
				<el-table-column prop="bindMobileNo" label="绑定手机"/>
			</el-table>
		</el-dialog>
	</section>
</template>

<script>
    import util from '../../common/js/util'
    import {
        addUser,
        batchBindDevice,
        batchRemoveUser,
        editUser,
        editUserRole,
        exportExcelUser,
        getDeviceList,
        getBindDeviceList,
        getDevUsers,
        getRoleList,
        getUserListPage,
        getUserRole,
        importExcelBindDeviceUrl,
        removeUser,
        sendMsg,
        batchUnBindDevice
    } from '../../api/api';
    import {getStore} from '../../common/js/storage';

    export default {
		data() {
            let checkMobileNo = (rule, value, callback) => {
                let myReg=/^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myReg.test(value)) {
				    this.codeTimeAllow = true;
                    return callback(new Error('请输入正确的手机号'));
                }else {
                    this.codeTimeAllow = false;
                    callback();
				}
			};
            let checkEmail = (rule, value, callback) => {
                if (!value){
                    callback();
				}
                let myReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                if (!myReg.test(value) || value!='') {
                    return callback(new Error('请输入正确的邮箱'));
                } else {
                    callback();
                }
            };
            return {
                uploadUrl:importExcelBindDeviceUrl(),
                uploadVisible:false,
                headers:{
                    'accessToken':  getStore("accessToken")
                },
                bindUserId:'',//操作的绑定的用户id
                deviceList:[],
                deviceListVisible:false,
                deviceListVisible2:false,
                listLoading3:false,
                defaultProps:{
                    key:'id',
					label:'description'
				},
				filters: {
                    params:'',
                    userType:'',
                    fromUid:'',
					toUid:'',
					uid:''
				},
				//开发者用户
				devUsers:[],
                noRoles: [],
                selectRoles: [],
				users: [],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
				selsDev: [],//设备选中列
                editRoleVisible:false,
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
                    userName: [
                        { min: 2, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
					],
                    email: [
                        { validator: checkEmail, trigger: 'blur' }
                    ],
                    userType: [
                        { required: true, message: '请选择用户类型', trigger: 'change' }
                    ]
				},
				//编辑界面数据
				editForm: {
					id: 0,
					userName: '',
                    mobileNo: '',
					pwd:'',
                    userType: '',
                    email: '',
                    compName: '',
                    isEnabled: '',
					remark: '',
                    devPl: ''
				},
				//新增界面是否显示
				addFormVisible: false,
				addLoading: false,
				addFormRules: {
                    userName: [
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    mobileNo: [
                        { required: true, message: '请输入账号名称', trigger: 'blur' },
                        { min: 2, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { validator: checkEmail, trigger: 'blur' }
                    ],
                    userType: [
                        { required: true, message: '请选择用户类型', trigger: 'change' }
					]
				},
				//新增界面数据
				addForm: {
				    userType:'',
                    userName: '',
                    mobileNo: '',
                    email: '',
                    compName: '',
                    isEnabled: true,
                    remark: '',
                    devPl: ''
				},
                codeTimeAllow:true,
                numberCode:"发送验证码",
                addOptions: [
				    {
                        value: 2,
                        label: '内部用户'
                    },{
                        value: 4,
                        label: '开发者'
					},{
                        value: 5,
                        label: '操作者'
                    },{
                        value: 6,
                        label: '管理员'
                    }
				],
                editOptions: [
                    {
                        value: 2,
                        label: '内部用户'
                    }, {
                        value: 3,
                        label: '注册用户'
                    }, {
                        value: 4,
                        label: '开发者'
                    },{
                        value: 5,
                        label: '操作者'
                    },{
                        value: 6,
                        label: '管理员'
                    }
                ],
                allOptions: [
                    {
                        value: 1,
                        label: '超级管理员'
                    }, {
                        value: 2,
                        label: '内部用户'
                    },{
                        value: 3,
                        label: '注册用户'
                    },{
                        value: 4,
                        label: '开发者'
                    },{
                        value: 5,
                        label: '操作者'
                    },{
                        value: 6,
                        label: '管理员'
                    }
                ]
			}
		},
		methods: {
            downloadTemp:function(){
                window.location.href='https://icecloud-test.oss-cn-beijing.aliyuncs.com/templates/B_UID.xls'
            },
            handleImport:function(){
                this.uploadVisible = true;
            },
            afterSuccess:function(response, file, fileList){
                if (response.code == 200){
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
				}else {
                    this.$message({
                        message: '上传失败',
                        type: 'error'
                    });
				}
              	this.uploadVisible = false;
				this.getUsers();
			},
            beforeUpload:function(file){
                let fileName=new Array()
                fileName =file.name.split('.');
                const extension = fileName[fileName.length-1] === 'xls';
                const extension2 =  fileName[fileName.length-1]=== 'xlsx';
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!extension && !extension2) {
                    this.$message({
                        message: '上传模板只能是xls、xlsx格式!',
                        type: 'warning'
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        message: '上传模板大小不能超过 10MB!',
                        type: 'warning'
                    });
                }
                return extension || extension2 && isLt2M
            },
		    //超级管理员不能有任何操作
            isSelect:function(row, index){
                return row.userType!=1;
			},
			//用户类型转换
            formatUserType: function (row, column,cellValue) {
                switch (cellValue) {
					case 1:
					    return '超级管理员';
					case 2:
					    return '内部用户';
					case 3:
					    return '注册用户';
                    case 4:
                        return '开发者';
                    case 5:
                        return '操作者';
					case 6:
                        return '管理员';
					default:
					    return '';
                }
			},
            formatDate: function(row, column, cellValue, index){
                if (cellValue == null)
                    return '';
                return util.formatDate.formatNum(cellValue,"yyyy-MM-dd");
            },
            //是否可用转换
            formatEnabled: function (row, column) {
                return row.isEnabled ? '可用' : '不可用';
            },
			//导出
            handleDownload:function(){
                let searchKey = this.filters.params;
                exportExcelUser(searchKey);
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取开发者用户
			getDevUsers:function(){
                getDevUsers().then(data=>{
                    if (data.code == 200){
                        this.devUsers = data.data;
					}
				})
			},
			//获取当前用户未绑定的设备信息
            getUnBindDevices:function(){
                let para = {
                    userId:this.bindUserId,
                    uid:this.filters.uid,
                    fromUid:this.filters.fromUid,
                    toUid:this.filters.toUid
				}
				this.listLoading3 = true;
                getDeviceList(para).then(data=>{
                    if (data.code == 200){
                        this.deviceList = data.data;
                    }
                    this.listLoading3 = false;
				});
			},
			//获取已绑定设备列表
            getBindDevices:function(){
                let para = {
                    userId:this.bindUserId,
					page:this.page
                }
                this.listLoading3 = true;
                getBindDeviceList(para).then(data=>{
                    if (data.code == 200){
                        this.deviceList = data.data;
                    }
                    this.listLoading3 = false;
                });
            },
			//批量绑定设备
            batchBindDevice: function(){
               let devids =  this.selsDev.map(item => item.id).toString();
               if (!devids.length>0){
                   return;
			   }
                this.$confirm('确认绑定所选设备吗？', '提示', {}).then(() => {
                    //获取当前用户的信息
                    let para ={
                        userId:this.bindUserId,
                        deviceIds:devids
                    }
                    batchBindDevice(para).then(data=>{
                        if (data.code == 200){
                            this.$message({
                                message: '绑定成功',
                                type: 'success'
                            });
                        }
                        this.getUnBindDevices();
                    });
                });
			},
			//批量解绑
            batchUnBindDevice: function(){
                let devids =  this.selsDev.map(item => item.id).toString();
                if (!devids.length>0){
                    return;
                }
                this.$confirm('确认解除绑定所选设备吗？', '提示', {}).then(() => {
                    //获取当前用户的信息
                    let para ={
                        userId:this.bindUserId,
                        deviceIds:devids
                    }
                    batchUnBindDevice(para).then(data=>{
                        if (data.code == 200){
                            this.$message({
                                message: '解除成功',
                                type: 'success'
                            });
                        }
                        this.getBindDevices();
                    });
                });
            },
			//加载未绑定的设备
            handleBatchBind:function(index,row){
				this.deviceListVisible = true;
				//设置当前操作的用户id
				this.bindUserId = row.id;
				this.deviceList=[]
			},
            //加载已经绑定的设备
            handleBatchUnBind:function(index,row){
				this.deviceListVisible2 = true;
				//设置当前操作的用户id
				this.bindUserId = row.id;
				//重新加载
				this.getBindDevices();
			},

			//加载角色设置
            handleRole:function(index,row){
              	this.editRoleVisible = true;
              	//加载用户已有角色
                let para= {
                    userId:row.id
                };
                //设置当前编辑的用户id
                this.editForm.id = row.id;
                getUserRole(para).then(data=>{
                    if (data.code == 200){
                        this.selectRoles = data.data;
                    }
                });
			},
			//
            sendMsg:function(){
				//获取当前的手机号码
				const mobileNo = this.addForm.mobileNo;
				let para = {
                    mobileNo:mobileNo
				}
				if (this.codeTimeAllow) return;
                sendMsg(para).then((data)=>{
                    if (data.code == 200){
                        this.$message({
                            message: '发送成功',
                            type: 'success'
                        });
                        this.preventSubmit(true)
                    } else {
                        this.$message({
                            message: '发送失败',
                            type: 'error'
                        });
                    }
                    this.codeTimeAllow = false
				})
			},
            preventSubmit (code) {
                let i = 60
                var setTime = setInterval(() => {
                    i--;
                    if (i === 0) {
                        clearInterval(setTime);
                        if (code) {
                            // 手机验证码
                            this.codeTimeAllow = false;
                            this.numberCode = '发送验证码'
                        }
                    } else {
                        if (code) {
                            this.codeTimeAllow = true;
                            this.numberCode = `${i}秒后重试`
                        }
                    }
                }, 1000)
            },
			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
                    searchKey: this.filters.params,
                    userType:this.filters.userType
				};
				this.listLoading = true;
				getUserListPage(para).then((data) => {
                    if (data.code == 200){
                        this.total = data.data.total;
                        this.users = data.data.rows;
                        this.listLoading = false;
                    }
                    this.listLoading = false;
				});
                getRoleList().then(data=>{
                    if (data.code == 200){
                        this.noRoles = data.data;
                    }
                });
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { id: row.id };
					removeUser(para).then((data) => {
                        this.listLoading = false;
                        if (data.code == 200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
						this.getUsers();
                        this.listLoading = false;
                    });
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				if (row.devPl == -1) row.devPl = null
				this.editForm = Object.assign({}, row);
				this.getDevUsers();
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
                    userType:'',
                    userName: '',
                    mobileNo: '',
                    userType: '',
                    email: '',
                    compName: '',
                    isEnabled: true,
                    vdSms: '',
                    vdTime: '',
                    remark: '',
                    devPl: ''
				};
                this.getDevUsers();
			},
            editRoleSubmit:function(){
				//获取当前编辑的用户以及当前选中的角色
				let para = {
				    id:this.editForm.id,
                	roleIds:this.selectRoles
				};
				this.editLoading = true;
                editUserRole(para).then(data=>{
                    if (data.code == 200){
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
					}
                    this.editLoading = false;
				})
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);
							editUser(para).then((data) => {
                                this.editLoading = false;
                                if (data.code == 200){
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: '提交失败',
                                        type: 'error'
                                    });
                                }
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getUsers();
                                this.editLoading = false;
                            });
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let para = Object.assign({}, this.addForm);
							console.log(para);
							addUser(para).then((data) => {
								this.addLoading = false;
                                if (data.code == 200){
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                }
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getUsers();
                                this.addLoading = false;
                            });
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			selsDeviceChange: function (sels) {
				this.selsDev = sels;
			},
			//批量删除
			batchRemove: function () {
				const ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { ids: ids };
					batchRemoveUser(para).then((data) => {
                        this.listLoading = false;
                        if (data.code == 200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
						this.getUsers();
                        this.listLoading = false;
                    });
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>

</style>